import React, { Component } from 'react'
import { contactUsReq } from '../../requests/contactUs'
import './aboutUs.less'
import {
    Layout,
    Card,
    message
} from "antd";
import ContactUs from '../../types/ContactUs';
import { getRes } from "../../configFile";
import siteProfileIcon from '../../static/images/关于.svg'
import contactUsIcon from '../../static/images/联系我们.svg'

//state接口
interface IState {
    aboutUs: ContactUs
}
//props接口
interface IProps {

}

export default class AboutUs extends Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
        this.state = {
            aboutUs: {
                contactWay: '',
                siteProfile: ''
            }
        }
    }

    async componentDidMount() {
        try {
            const res = getRes(await contactUsReq())
            if (res.isSuccessful) {
                this.setState({ aboutUs: res.data });
            } else {
                console.error(res);
                message.error("查询关于我们失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
    }

    render() {
        return (
            <Layout className='layout'>
                <div className="frameCardWrapper">
                    <div className="siteProfile">
                        <Card
                            title={
                                <div className="aboutUsTitle">
                                    <img src={siteProfileIcon} alt="siteProfileIcon" />
                                    <b>网站简介</b>
                                </div>
                            }
                            bordered={false}
                        >
                            <div className='siteProfile' dangerouslySetInnerHTML={{ __html: this.state.aboutUs.siteProfile }} />
                        </Card>
                    </div>
                    <div className="contactWay">
                        <Card
                            title={
                                <div className="aboutUsTitle">
                                    <img src={contactUsIcon} alt="contactUsIcon" />
                                    <b>联系我们</b>
                                </div>
                            }
                            bordered={false}
                        >
                            <div className='contactWay' dangerouslySetInnerHTML={{ __html: this.state.aboutUs.contactWay }} />
                        </Card>
                    </div>
                </div>
            </Layout>
        )
    }
}
